<template>
  <div class="container">
    <el-row>
      <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="姓名：" prop="name">
          <el-col :span="12">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="微信头像：" prop="headImgUrl">
          <img style="width: 100px; height: 100px" :src="form.headImgUrl" />
        </el-form-item>
        <el-form-item label="微信昵称：" prop="name">
          <el-col :span="12">
            <el-input disabled v-model="form.nickname"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="年龄：" prop="age">
          <el-col :span="12">
            <el-input
              type="age"
              v-model.number="form.age"
              placeholder="请输入年龄"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item class="radio-form" label="性别：" prop="sex">
          <el-col :span="12">
            <el-radio-group v-model="form.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="密码：" prop="password">
          <el-col :span="12">
            <el-input
              type="password"
              v-model="form.password"
              placeholder="请输入密码"
            ></el-input>
          </el-col>
        </el-form-item> -->
        <el-form-item prop="phone" label="手机号：">
          <el-col :span="12">
            <el-input
              v-model="form.phone"
              placeholder="请输入手机号"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item
          class="radio-user"
          label="用户类型："
          label-width="70"
          prop="type"
        >
          <el-col :span="12">
            <el-radio-group v-model="form.type">
              <!-- <el-radio :label="1">管理员</el-radio> -->
              <el-radio :label="2">员工</el-radio>
              <el-radio :label="3">客户</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <template v-if="form.type == 2">
          <el-form-item prop="financialPosition" label="理财职称：">
            <el-col :span="12">
              <el-input
                v-model="form.financialPosition"
                placeholder="请输入理财职称"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item prop="fortuneExperience" label="财富理念：">
            <el-col :span="12">
              <el-input
                v-model="form.fortuneExperience"
                placeholder="请输入财富理念"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item prop="fortuneIdea" label="财富履历：">
            <el-col :span="12">
              <el-input
                v-model="form.fortuneIdea"
                placeholder="请输入财富履历"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="标签：" prop="financialTag" style="width: 500px">
            <el-tag
              :key="tag"
              v-for="tag in form.financialTag"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
              >添加标签</el-button
            >
          </el-form-item>
        </template>
        <el-form-item
          v-if="form.type != 3"
          class="radio-user"
          label="用户角色："
          label-width="70"
          prop="role"
        >
          <el-col :span="12">
            <el-radio-group v-model="form.role">
              <el-radio label="admin">管理员</el-radio>
              <el-radio label="yunying">运营</el-radio>
              <el-radio label="bianji">编辑</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item
          class="radio-user"
          label="用户权限："
          label-width="70"
          prop="dataAuth"
        >
          <el-col :span="12">
            <el-radio-group v-model="form.dataAuth">
              <el-radio :label="1">个人数据权限</el-radio>
              <el-radio :label="2">全部数据权限</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')" :loading="loading"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import normalFilter from "@/components/NormalFilter";
import { getDetail, update } from "@/api/user";
import Tinymce from "@/components/Tinymce";
import { Message } from "element-ui";

export default {
  name: "UserUpdate",
  components: {
    normalFilter,
    Tinymce
  },
  data() {
    const _checkPsw = (rule, value, callback) => {
      if (value.length < 6) {
        return callback(new Error("密码长度必须大于6位"));
      }
      callback();
    };
    const _checkPhone = (rule, value, callback) => {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        return callback(new Error("手机号格式错误"));
      }
      callback();
    };
    return {
      loading: false,
      inputValue: "",
      financialTag: [],
      inputVisible: false,
      form: {
        name: "",
        headImgUrl: "",
        nickname: "",
        sex: "",
        age: "",
        type: "",
        role: "bianji",
        password: "",
        phone: "",
        dataAuth: "",
        financialTag: [],
        financialPosition: "",
        fortuneExperience: "",
        fortuneIdea: ""
      },
      rules: {
        // name: [{ required: true, message: "姓名不能为空" }],
        // age: [
        //   { required: true, message: "年龄不能为空" },
        //   { type: "number", message: "年龄必须为数字值" },
        // ],
        // sex: [{ required: true, message: "选项不能为空" }],
        password: [
          { required: true, message: "密码不能为空" },
          { validator: _checkPsw, trigger: "blur" }
        ],
        // phone: [
        //   { required: true, message: "手机号不能为空" },
        //   { validator: _checkPhone, trigger: "blur" },
        // ],
        type: [{ required: true, message: "选项不能为空" }],
        role: [{ required: true, message: "选项不能为空" }]
      }
    };
  },
  async created() {
    let { id } = this.$route.params;
    this.id = id;
    let detail = await getDetail({ id });
    if (detail) {
      detail["financialTag"]
        ? (detail["financialTag"] = detail["financialTag"].split(","))
        : (detail["financialTag"] = []);
      this.form = detail;
    }
  },
  mounted() {
    //   tinymce.init({})
  },
  methods: {
    onSubmit(formName) {
      const { validate } = this.$refs[formName];
      let _this = this;
      validate(valid => {
        if (valid) {
          this._submitData({
            ..._this.form,
            financialTag:this.form.financialTag.join(','),
            id: _this.id
          });
        }
      });
    },
    async _submitData(params) {
      this.loading = true;
      let res = await update(params);
      this.loading = false;
      if (res.code === 1) {
        Message({
          message: "保存成功！",
          type: "success",
          duration: 1 * 1000
        });
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      }
    },
    handleClose(tag) {
      this.form.financialTag.splice(this.form.financialTag.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.form.financialTag.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>
